<template>
    <div class="news-list">
        <van-nav-bar title="我的收款方式" left-arrow @click-left="backUp"></van-nav-bar>
        <ul>
            <li
                    :class="!item.isDefault ? 'active' : '' "
                    v-for="item in bankcardList"
                    :key="item.memberAccountId"
            >
                <div class="news-text">
                    <h4>{{item.tradePlatformDesc}}</h4>
                    <h4>{{item.account}}</h4>
                    <div class="news-type">
                        <p>{{item.name}}</p>
                        <van-button
                                v-if="!item.isDefault"
                                round
                                size="mini"
                                type="warning"
                                @click="changeDefaultBankCard(item.memberAccountId)"
                        >设为默认
                        </van-button>
                    </div>
                    <div class="news-type">
                        <p>{{item.bankName}}</p>
                        <van-button round size="mini" type="danger" @click="deleteBankCard(item.memberAccountId)">删除
                        </van-button>
                    </div>
                </div>
            </li>
        </ul>
        <div class="btn">
            <van-button block round type="danger" to="bankcardadd">添加收款账户</van-button>
        </div>
    </div>
</template>
<script>
    import {Field, Icon, Button, Cell, CellGroup, NavBar, Toast} from "vant";
    import validator from "@/utils/validation.js";
    import api from "@/utils/restful.js";
    import axios from "axios";

    export default {
        components: {
            [Field.name]: Field,
            [Icon.name]: Icon,
            [Button.name]: Button,
            [Cell.name]: Cell,
            [CellGroup.name]: CellGroup,
            [NavBar.name]: NavBar,
            [Toast.name]: Toast
        },
        data() {
            return {
                bankcardList: []
            };
        },
        mounted() {
            this.getBankCardList();
        },
        methods: {
            backUp() {
                this.$router.go(-1);
            },
            getBankCardList() {
                this.$axios({
                    method: "post",
                    url: api.accountList,
                    params: {
                        token: localStorage.getItem("token")
                    }
                }).then(res => {
                    this.bankcardList = res.data;
                });
            },
            deleteBankCard(bankCardId) {
                this.$axios({
                    method: "post",
                    url: api.accountDelete,
                    params: {
                        token: localStorage.getItem("token"),
                        memberAccountId: bankCardId
                    }
                }).then(res => {
                    this.$toast(res.msg);
                    this.getBankCardList();
                });
            },
            changeDefaultBankCard(memberAccountId) {
                this.$axios({
                    method: "post",
                    url: api.accountChangeDefault,
                    params: {
                        token: localStorage.getItem("token"),
                        memberAccountId: memberAccountId
                    }
                }).then(res => {
                    this.$toast(res.msg);
                    this.getBankCardList();
                });
            }
        }
    };
</script>
<style lang="less" scoped>
    @import "~style/common.less";

    .news-list {
        min-height: 100vh;
        background-color: @bgColor;

        ul {
            padding: 0 20px;

            li {
                display: flex;
                align-items: center;
                padding: 0 15px;
                margin-bottom: 20px;
                height: 140px;
                border: 1px solid #eee;
                border-radius: 20px;
                background: #fff;
                box-shadow: 0px 5px 5px #e7e7e7;

                &.active {
                    border: 1px solid #eee;
                }

                .news-text {
                    width: 100%;
                    margin-left: 15px;

                    h4 {
                        color: @priColor;
                        .font-dpr(15px);
                        line-height: 20px;
                        margin-bottom: 10px;
                        .textoverflow(2);
                    }

                    .news-type {
                        margin-bottom: 5px;
                        display: flex;
                        justify-content: space-between;
                        .font-dpr(12px);
                    }
                }
            }
        }
    }

    .btn {
        padding: 0 20px;
        margin-top: 20px;
    }
</style>
